<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ch">
<head>
    <base th:href="${#request.getScheme()}+'://'+${#request.getServerName()}+':'+${#request.getServerPort()}+${#request.getContextPath()}">
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}"/>
    <script th:inline="javascript">
        var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
    </script>
</head>

<style lang="scss" scoped>
    .mb_5{
        margin-bottom: 5px;
    }
    .order-card {
        padding: 10px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #e8eaec;
        position: relative;
    }
    .global_color {
        /*color: $theme_color;*/
    }
    p {
        color: #999;
        margin: 3px;
        margin-left: 5px;
    }
    h3 {
        font-weight: normal;
        font-size: 16px;
    }
    .operation-time {
        position: absolute;
        right: 20px;
        top: 20px;
    }

    /** 订单价格 */
    .order-price {
        text-align: right;
        margin-top: 30px;
        margin-right: 200px;
        font-size: 16px;
        color: #999;
    }
    > div > span:nth-child(2) {
        width: 130px;
        text-align: right;
        display: inline-block;
        margin-top: 10px;
    }
    .actrual-price {
        color: #00FF00;
        font-weight: bold;
        font-size: 20px;
    }
    .verificationCode {
        font-size: 20px;
        margin-bottom: 20px;
        color: rgb(65, 63, 63);
        font-weight: bold;
        text-align: center;
    }
    span{
        color: #00FF00;
    }
    /** 订单进度条 */
    .progress {
        margin: 15px 0;
    }
</style>
<body style="margin:10px;background-color: white">
<div class="wrapper wrapper-content">


    <div class="order-card">
        <h3>收货人信息</h3>
        <p>收货人：<span th:text="${order.getUsername()}">ren</span></p><br>
        <p>手机号码：<span th:text="${order.getReceiverMobile()}">ren</span></p><br>
        <p>收货地址：<span th:text="${order.getReceiverAddress()}">ren</span></p><br>
    </div>
    <div class="order-card">
        <h3>付款信息</h3>
        <p>支付方式：支付宝</p><br>
        <p>付款状态：<span th:text="${order.getPayStatus()} == 1 ? '已支付' : '未支付' ">ren</span></p>
    </div>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>订单详细</legend>
    </fieldset>

    <div class="layui-form">
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>商品名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>支付金额</th>
                <th>商品图片</th>
                <th>邮费</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="orderDetail : ${details}">
                <td th:text="${orderDetail.getName()}"></td>
                <td th:text="${orderDetail.getPrice()}"></td>
                <td th:text="${orderDetail.getNum()}">1989-10-14</td>
                <td th:text="${orderDetail.getPayMoney()}"> </td>
                <td><img th:src="${orderDetail.getImage()}"></td>
                <td th:text="${orderDetail.getPostFee()}"></td>
            </tr>
            </tbody>
        </table>
    </div>


    <!-- 订单价格 -->
    <div class="order-price">
        <div>
            <span>商品件数：</span><span th:text="${order.getTotalNum()} + '件'"></span>
        </div>
        <div>
            <span>商品总价：</span><span th:text="${order.getTotalMoney()} + '元'"></span><br>
        </div>
        <div>
            <span>运费：</span><span th:text="${order.getPostFee()} + '元'"></span><br>
        </div>
        <div>
            <span>应付金额：</span>
            <span class="actrual-price" th:text="${order.getPayMoney()} + '元'"></span>
        </div>
    </div>
</div>
</body>
<script th:src="@{/static/layui/jquery.min.js}"></script>
<script th:src="@{/static/layui/layui.js}"></script>
<script th:src="@{/static/js/userInfo/orderlist.js}"></script>
</html>